<template>
  <Dialog title="题目导入" v-model="dialogVisible" width="420">
    <el-upload
      ref="uploadRef"
      v-model:file-list="fileList"
      :action="importUrl"
      :headers="uploadHeaders"
      :before-upload="beforeUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      :on-progress="handleUploadProgress"
      :auto-upload="true"
      :limit="1"
      :on-exceed="handleExceed"
      drag
    >
      <Icon icon="ep:upload" />
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <template #tip>
        <div class="el-upload__tip">
          只能上传xlsx/xls文件，且不超过500KB
        </div>
      </template>
    </el-upload>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { getAccessToken, getTenantId } from '@/utils/auth'
import * as QuestionApi from '@/api/pm/tm'

defineOptions({ name: 'QuestionImportForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const fileList = ref([]) // 上传的文件列表
const uploadRef = ref() // 上传组件的引用
const importUrl = ref('') // 上传的地址
const uploadHeaders = ref() // 上传的请求头部

/** 打开弹窗 */
const open = () => {
  dialogVisible.value = true
  fileList.value = []
  // 设置上传的地址
  importUrl.value = QuestionApi.getImportUrl()
  // 设置上传的请求头部
  uploadHeaders.value = {
    Authorization: 'Bearer ' + getAccessToken(),
    'tenant-id': getTenantId()
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 上传前的校验 */
const beforeUpload = (file: File) => {
  const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 
                  file.type === 'application/vnd.ms-excel'
  if (!isExcel) {
    message.error('只能上传 Excel 文件!')
    return false
  }
  const isLt500KB = file.size / 1024 < 500
  if (!isLt500KB) {
    message.error('上传文件大小不能超过 500KB!')
    return false
  }
  return true
}

/** 上传成功 */
const handleUploadSuccess = (response: any) => {
  if (response.code !== 0 && response.code !== '0') {
    message.error(response?.msg || '上传失败')
    return
  }
  message.success('上传成功')
  dialogVisible.value = false
  // 发送操作成功的事件
  emit('success')
}

/** 上传失败 */
const handleUploadError = (error: any) => {
  message.error('上传失败：' + error.message)
}

/** 上传进度 */
const handleUploadProgress = (event: any) => {
  // 可以在这里处理上传进度
}

/** 文件超出个数限制 */
const handleExceed = () => {
  message.error('只能上传一个文件!')
}

const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
</script>
